<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
		  background: #242424;
		  height: 100%;
		  width: 100%;
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
		  font-family: sans-serif;
		  color: #FFFFFF;
		}
		
		div {
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-content: center;
		  align-items: center;
		  width: 100%;
		  height: 100vh;
		}
		
		h1 {
		  margin: 2em;
		  text-align: center;
		}
		
		a {
		  cursor: pointer;
		  transition: ease-in-out, 0.2s, color;
		}
		a:hover {
		  color: #DDD;
		}
		
		.nested {
		  display: block;
		  max-width: 20em;
		  padding: 2px;
		  overflow: hidden;
		  border-radius: 2em;
		  background: linear-gradient(to right, #00ff00 0%, #00e5ff 100%);
		}
		.nested span {
		  display: inline-block;
		  padding: 1em;
		  text-align: center;
		  background: #242424;
		  border-radius: 2rem;
		}
		.nested span p {
		  padding: 0 2em;
		  margin: 0;
		}
		
		.pseudo {
		  display: block;
		  margin-top: 20px;
		  position: relative;
		  border-radius: 2em;
		  padding: 1em 2em;
		  background: #242424;
		}
		.pseudo:after {
		  position: absolute;
		  z-index: -1;
		  top: -2px;
		  bottom: -2px;
		  right: -2px;
		  left: -2px;
		  background: linear-gradient(to right, #00ff00 0%, #00e5ff 100%);
		  border-radius: 2em;
		  content: "";
		}
	</style>
	<body>
		<div>
		  
		  <h1>Gradient + Border Radius</h1>
		  
		  <a class="nested"><span><p>ANOTHER ONE</p></span></a>
		  
		  <a class="pseudo">AND ANOTHER ONE</a>
		  
		</div>

	</body>
</html>
